<!--  -->
<template>
  <div class="infinite-list-wrapper">
    <ul
      v-infinite-scroll="load"
      class="list"
      :infinite-scroll-disabled="disabled"
    >
      <li v-for="item in data" :key="i" class="list-item" @click="handleClick(item)">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: flex-start;
          "
        >
          <div
            style="
              width: 100px;
              height: 100px;
              border-radius: 10%;
              overflow: hidden;
              margin: 20px 10px 20px 30px;
            "
          >
            <img
              style="width: 100%; height: 100%; object-fit: cover"
              :src="item.cover"
              alt=""
            />
          </div>
          <div
            style="
              font-size: 14px;
              font-size: x-large;
              font-weight: bold;
              width: 85%;
            "
          >
            <el-descriptions :title="item.title" style="margin-left: 10px;width: 600px;">
              <el-descriptions-item label="">
                <el-text line-clamp="2">
                  {{item.description}}
                </el-text>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="" style="margin-left: 10px">
              <el-descriptions-item label="">
                <el-row class="mb-4">
                  <el-col :span="14">
                      <el-button type="primary" size="small" round
                      v-for="(it, index) in item.tags.split(',')" :key="index"
                      @click="toCommunity(it)"
                      >
                      {{it}}</el-button>
                  </el-col>
                  <el-col :span="10">
                    <el-rate
                      v-model="item.score"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value} points"
                    />
                  </el-col>
                  {{item.raters}}人已评分
                </el-row>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="noMore">No more</p>
  </div>
</template>

<script>
import axios from "axios";
import { computed } from "vue";

export default {
  name: "HomeExhibition",
  components: {},
  props: {
    data: {
      type: Array,
      default: [
        {"d":"1"},
        {"d":"1"},
        {"d":"1"},
        {"d":"1"},
      ],
    },
    dataNum:Int16Array
  },
  data() {
    return {
      // value:3.7,  //评分，在真实数据内部，后续不需要此假数据
      start: 5,   //当前数据总长，即下次获取的内容初始值-1
      step:5,
      loading: false,
      noMore: computed(() => {
        return this.start >= this.dataNum;
      }),
      disabled: computed(() => {
        return this.loading || this.noMore;
      })
    };
  },
  computed: {},
  watch: {

  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        //对外反射核心参数以获得数据加载,分别是初始值和结束值
        this.$emit('getArticle',this.start,this.start+this.step)

        this.start += this.step;
        this.loading = false;
        
      }, 500);
    },
    handleClick(item){
      this.$emit('showArticle',item)
      // console.log(item);
    },
    toCommunity(tag){
      // alert(tag)
      this.$emit('toCommunity',tag)
    }
  },
  created() {
    // console.log("noMore:"+this.noMore);
    // console.log("disabled:"+this.disabled);
    // console.log("data:"+this.data);
    // console.log("dataNum:"+this.$props.dataNum);
  },
  mounted() {},
};
</script>

<style scoped>
.infinite-list-wrapper {
  /* height: 600px; */
  text-align: center;
}

/* li */
.list-item {
  /* display: flex; */
  margin-bottom: 20px;
  cursor: pointer;
}

.list-item img {
  width: 70px;
  height: 70px;
  border-radius: 10%;
  object-fit: cover;
}

.list-item .content {
  flex: 1;
  margin-left: 10px;
}

.list-item .content .title {
  font-size: 14px;
  font-size: x-large;
  font-weight: bold;
}

.list-item .content .description {
  font-size: 12px;
  color: #999aaa;
}

.infinite-list-wrapper {
  height: 100%;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.list li:last-child {
  border-bottom: none;
}

.list li:hover {
  box-shadow: 1px 1px 20px #555555;
}
</style>
